// 菜肴类型

<template>
  <div class="containerBox wrap">
    <cusCard>
      <div class="searchBox">
        <el-form :model="typeForm" :inline="true">
          <el-form-item label="类型名称">
            <el-input v-model.trim="typeForm.dishTypeName" placeholder="请输入菜肴类型名称" @keyup.enter="searchHandler" />
          </el-form-item>
          <el-form-item>
            <cusButton color="#0052D9" @click="searchHandler">查询</cusButton>
            <cusButton CssObj="border-color:#0052D9;color:#0052D9" @click="resetHandler">重置
            </cusButton>
          </el-form-item>
        </el-form>
      </div>
    </cusCard>
    <cusCard class="cmt-16 wrap-table">
      <cusButton color="#0052D9" @click="addHandler('add')">
        <i-ep-plus />添加
      </cusButton>
      <cusTable :tableData="dishTableData" :tableColumns="tableColumns" :loading="loading" @changeCol="changeCol"
        @changeRow="changeRow" height="500px" :showSelect="false">
        <template #operation="{ row }">
          <cusButton style="color:#0052D9;padding:0" :text="true" @click="addHandler('edit', row)">编辑
          </cusButton>
          <el-popconfirm width="250" confirm-button-text="确认" cancel-button-text="取消"
            :title="`确认删除${row.dishTypeName}吗?`" @confirm="delHandler(row)">
            <template #reference>
              <cusButton style="color:#0052D9;padding:0" :text="true" v-if="row.isInternal !== '1'">
                删除
              </cusButton>
            </template>
          </el-popconfirm>
        </template>
      </cusTable>
      <div class="cmt-16 float-right">
        <cusPagination @handleSizeChange="sizeChange" @handleCurrentChange="currentChange" :all="pageObj">
        </cusPagination>
      </div>
    </cusCard>
    <editDialog ref="editDialogRef" @onInit="getDishTypeList"></editDialog>

  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import editDialog from "./components/editDialog.vue";
import { reqDishTypeList, reqDeleteType } from "@/api/business/dishes";
const router = useRouter();

const formOrigin = () => ({
  dishTypeName: "",
});

const typeForm = ref(formOrigin());

const pageInit = () => ({
  total: 0,
  page: 1,
  pageSize: 10,
});
const pageObj = ref(pageInit());
const loading = ref(false);

// 重置查询
const resetHandler = () => {
  typeForm.value = formOrigin();
  pageObj.value = pageInit();
  getDishTypeList();
};
const sizeChange = (val: number) => {
  pageObj.value.pageSize = val;
  getDishTypeList();
};

const currentChange = (val: number) => {
  pageObj.value.page = val;
  getDishTypeList();
};

const editDialogRef = ref(null);
const addHandler = (type, row) => {
  if (type == "edit") {
    editDialogRef.value.showHandler(JSON.parse(JSON.stringify(row)));
  } else {
    editDialogRef.value.showHandler();
  }
};
// 表格列数据
const tableColumns = reactive([
  { label: "类型名称", prop: "dishTypeName", width: "200" },
  { label: "类型编码", prop: "code", width: "200" },
  {
    label: "操作",
    prop: "operation",
    slot: true,
    width: "150",
    fixed: "right",
  },
]);
const dishTableData = ref([]);
// 获取菜肴类型
const getDishTypeList = () => {
  loading.value = true;
  reqDishTypeList({
    dishTypeName: typeForm.value.dishTypeName,
    currentPage: pageObj.value.page,
    pageSize: pageObj.value.pageSize,
  }).then((res) => {
    loading.value = false;
    if (res.code == 1) {
      dishTableData.value = res.data.list;
      pageObj.value.total = res.data.total;
    }
  });
};

const delHandler = (row) => {
  reqDeleteType({
    id: row.id,
  }).then((res) => {
    if (res.code == 1) {
      ElMessage.success("删除成功");
      getDishTypeList();
    } else {
      ElMessage.info(res.msg);
    }
  });
};

const searchHandler = () => {
  getDishTypeList();
};

onMounted(() => {
  getDishTypeList();
});
</script>

<style lang="scss" scoped></style>